
<div id="wrapMain">
	<div id="innerMain">
		    <div class="col-left"> 
        
        
        
        <nav class="navbar navbar-default" role="navigation" id="myNav">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"><i class="icon-home"></i></a>
    </div>
     <div class="navbar-header pull-right" >
     <?php
		if($_SESSION['list_news_list'] == true):
	?>
		<a title="Ảnh lớn" class="navbar-brand modePick modeActive" id="listMode" href="#"><span style="color: #fff;"><i class="icon-align-justify"></i></span></a>
    	<a title="Ảnh nhỏ" class="navbar-brand modePick" id="gridMode" href="#"><i class="icon-th"></i></a>
	<?php 
		else:
     ?>
     	<a title="Ảnh lớn" class="navbar-brand modePick" id="listMode" href="#"><i class="icon-align-justify"></i></a>
    	<a title="Ảnh nhỏ" class="navbar-brand modeActive modePick" id="gridMode" href="#"><span style="color: #fff;"><i class="icon-th"></i></span></a>
     
     <?php 
		endif;
     ?>
    
    
      <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown">Xem Theo <b class="caret"></b></a>
        <ul class="dropdown-menu">
          	<li><a href="date/desc"><i class="icon-time"></i> Thời gian (Mới <i class="icon-long-arrow-right"></i>) </a></li>
      <li><a href="date/asc"><i class="icon-time"></i>  Thời gian (Cũ <i class="icon-long-arrow-right"></i>)</a></li>

       <li><a href="views/desc"><i class="icon-eye-open"></i> View (Nhiều <i class="icon-long-arrow-right"></i>) </a></li>
      <li><a href="views/asc"><i class="icon-eye-open"></i> View (Ít <i class="icon-long-arrow-right"></i>)</a></li>
      
    
    <li><a href="like/desc"><i class="icon-facebook-sign"></i> Like (Nhiều <i class="icon-long-arrow-right"></i>) </a></li>
      <li><a href="like/asc"><i class="icon-facebook-sign"></i> Like ( Ít <i class="icon-long-arrow-right"></i>)</a></li>

       <li><a href="comments/desc"><i class="icon-comment"></i> Comment ( Nhiều <i class="icon-long-arrow-right"></i> ) </a></li>
      <li><a href="comments/asc"><i class="icon-comment"></i>  Comment ( Ít <i class="icon-long-arrow-right"></i> )</a></li>
        </ul>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
 
</nav>
        
        
        
        
  
        

<?php
		//POST RENDER GRID VIEW DATA
		
		
		$page = (isset($_GET['page']) && $_GET['page'] != '') ? $_GET['page'] : 1;
		post_render_grid($data['info'], null, null, $page);
		$max_page = $data['page'];

?>
		
		<nav id="page-nav">
			<a href="index.php?module=ajax&act=ajax&case=1&t=load_more_items&page=<?php echo $page; ?><?php 
			if(isset($_GET['ext'])){ 
				echo "&ext=".$_GET['ext']."&sort=".$_GET['sort']; 
				$append = "/".$_GET['ext']."/".$_GET['sort'];
			
			}else{
				$append = '';
			}
			?>">
			</a>

		</nav>
		<div class="loading" id="mainLoading"><div id="loadMoreItems" class="normalLoadBtn"><img width="20" src="public/images/loading.gif" alt="loading" /> Loading </div><div class="clr"></div></div>
		<div id="next-page"></div>

</div> <!-- COL MD 9 -->
  
                    <div class="col-right">
  					<?php render_col_right('home'); ?>	

					</div>




	
	</div><!-- end innerMain -->
</div><!-- end wrapMain -->
		
   <script>
   
  $(document).ready(function(){

	
	 
//	mw = getItemWidth();
    var max_page = '<?= $max_page ?>';
    var $container = $('#contentIndex');
      $container.imagesLoaded(function(){
    	 
      $container.masonry({
        itemSelector: '.item',
        columnWidth:3,
		isFitWidth: true
      });
     
    });
    var nextSelector = '#page-nav a';
    var origNextUrl = $(nextSelector).attr('href');

    var pageRegex = /(page=)([0-9]+)/;
    var page  = origNextUrl.match(pageRegex)[2];
    var mypage = page;

    var loadedTime = 0;
    
    $container.infinitescroll({
	    navSelector  : '#page-nav',    // selector for the paged navigation 
	    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
	    itemSelector : '.item',     // selector for all items you'll retrieve
	   
	    path: function(pageNum) {
	    	newPage = mypage + 1;
	    	previousPage = parseInt(<?= $page; ?>) - parseInt(<?= LOAD_TIME; ?>);
	    	
	    	if(previousPage == 0) previousPage = 1;
	    	
	    	if(previousPage < 0) previousPage = null;
		    $('#mainLoading').show();

			if(parseInt(mypage) >= parseInt(max_page)){
				$('#mainLoading').hide();
				if(previousPage != null){
					$('#next-page').append('<div class="normalLoadBtn" id="previousPage"><a href="' + '<?php echo url_ajax(); ?>' + previousPage + '"><i class=" icon-long-arrow-left"></i> Bài cũ hơn</a></div>');
				}
				$('#next-page').append('<div class="normalLoadBtn" id="nextPage">Hết dữ liệu</div>');
				return;
			}

	        if(loadedTime >= 0 && ((mypage + 1) % <?= LOAD_TIME ?> == 0) && mypage >= 1 ){
		        $('#mainLoading').hide();
		        if(previousPage != null){
					$('#next-page').append('<div class="normalLoadBtn" id="previousPage"><a href="' + '<?php echo url_ajax(); ?>' + previousPage + '"><i class=" icon-long-arrow-left"></i> Bài cũ hơn</a></div>');
				}
		        
		        $('#next-page').append('<div class="normalLoadBtn" id="nextPage"><a href="' + '<?php echo url_ajax(); ?>' + newPage+ '">Xem tiếp <i class=" icon-long-arrow-right"></i></a></div>');
	        }
	       
	        mypage++;
	        loadedTime++;
	        
	        return origNextUrl.replace( pageRegex, ("$1" + (mypage)));
        }
    },
      
      
      
      // trigger Masonry as a callback
      function( newElements ) {
     
    	$.each(newElements, function(e, index){

			attrHref = $(index).find('.hoverUnderline').attr('href');
			
			item = $(index).find('.innerItem');
			id = $(item).attr('data-href');
			type = $(item).attr('data-rel');
			//$(item).append('<div style="width:70px;" class="fb-like" data-href="'+attrHref+'" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>');
			//$(item).append('<div class="fb-comments" data-href="'+attrHref+'" data-numposts="2" data-width="380"></div>');
			FB.XFBML.parse(document.getElementById('innerItem-' + id + '-' + type));
			//$(index).find(');
			
			$(index).find('.hoverUnderline').attr('href', attrHref + '&pagerel=' + mypage);
			$(index).find('.textmore a').attr('href', attrHref + '&pagerel=' + mypage);
			$(index).find('.itemImage').parent().append('<div class="urlId" style="display: none">'+attrHref+'</div>');
			//alert(attrHref);
		});
		
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $('.video_play_icon').center();
          $('.gif_play_icon').center();
          $container.masonry( 'appended', $newElems, true ); 
          
            $('#mainLoading').hide();
		  
        });
      }
    );
	

	
 
    
  });
  
  	
</script>     
<!-- end #wrapMain -->	